import React from 'react';
import {browserHistory} from '../utils/imports'
export default class Back extends React.Component {

    // static defaultProps = {
    //      prefixCls: 'zm'
    //  };

    constructor() { //初始化state的工作要在constructor中完成。
        super();
        //在react中，无法获取dom节点，把要改变的值放在state状态机中
        this.state = {
            top: '76%',  //触摸按钮初始位置（距离左边顶部的位置）
            left: '83%',
            startX: '',   //触摸按钮初始的坐标
            startY: '',
            x: 0,  //记录触摸按钮触摸后有无变化
            y: 0,
            height: document.documentElement.clientHeight,  //屏幕可视宽高
            width: document.documentElement.clientWidth,
        };

    }

    handleStart(e){
        e.preventDefault();

//前面原生js用的是touches,其实还有一个targetTouches，在这两个的输出结果是一致的。
        this.setState({  //当触摸开始时候，记录当时的坐标值，还有设置触摸变化的xy轴的变化为0，因为当新一轮触摸开始时候，必须重新设置，相当于初始化
            startX : e.targetTouches[0].clientX,
            startY : e.targetTouches[0].clientY,
            x:0,
            y:0,
        });
    }

    handleTouchMove(e) {
        const { startX, startY, width, height } = this.state;//取得初始坐标和屏幕可视宽高

        this.setState({
            //设置当前的坐标位置，思路和上面原生的一样，不过由于react有实时变化的状态机state，所以在此用touches，targetTouches
            //都可以来设置实时变化的值，不用用到changedTouches；
            left: Math.round(e.touches[0].clientX) - 48 <= 0 || Math.round(e.touches[0].clientX) >= width - 48 ? (Math.round(e.touches[0].clientX) - 48 <= 0 ? 0 : width - 48) : Math.round(e.touches[0].clientX),
            top: Math.round(e.touches[0].clientY) - 48 <= 0 || Math.round(e.touches[0].clientY) >= height - 48 ? (Math.round(e.touches[0].clientY) - 48 <= 0 ? 0 : height - 48) : Math.round(e.touches[0].clientY),
            x: e.touches[0].clientX - startX, //当前触摸点-初始坐标取得实时变化值
            y: e.touches[0].clientY - startY,
        });
    }

    handleTouchEnd (e) {
        const { x, y } =  this.state;

        if (x == 0 && y == 0) { //触摸结束后，判断实时变化值有没变化，没变化则视为点击事件。
            browserHistory.push('#');
        };
    }

    render() {
        const { prefixCls } = this.props;
        const { top, left, height, width } = this.state;  //取得实时状态机state的值
        return (
            <div
                className="zm"
                style={{top:`${top}`,left:`${left}` }}        //取得state的值实时改变触摸点的坐标位置
                onTouchStart={this.handleStart.bind(this)}  //使用bind(this)改变函数作用域，不加上bind则this指向的是全局对象window而报错。
                onTouchMove={this.handleTouchMove.bind(this)}
                onTouchEnd={this.handleTouchEnd.bind(this)}
            />

        )
    }
}
